import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

Control {
    id: root

    property alias model: listView.model

    width: 250
    padding: 0
    background: Rectangle {
        radius: 2
        color: "#DEDEDE"
    }

    ListView {
        id: listView
        anchors.fill: parent
        ScrollBar.vertical: ScrollBar { }
        snapMode: ListView.SnapToItem
        flickDeceleration: 2000
        cacheBuffer: 200
        clip: true
        model: 100
        section.property: "section"
        section.criteria: ViewSection.FullString
        section.labelPositioning: ViewSection.InlineLabels | ViewSection.CurrentLabelAtStart
        section.delegate: Rectangle {
            width: root.width
            height: 24
            color: "#99428bca"

            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
        delegate: ItemDelegate {
            id: control
            width: root.width
            height: 64
            highlighted: ListView.isCurrentItem
            onClicked: listView.currentIndex = index
            text: index
            contentItem: GridLayout {
                anchors.fill: parent
                anchors.margins: 8
                columnSpacing: 8
                columns: 2
                Image {
                    id: headAvatar
                    Layout.alignment: Qt.AlignCenter
                    Layout.preferredWidth: 40
                    Layout.preferredHeight: 40
                    source: avatar// "qrc:/images/icon_user_back.png" // headImgUrl
                    sourceSize.width: width
                    sourceSize.height: height
                    onStatusChanged: {
                        if(headAvatar.status == Image.Error) {
                            headAvatar.source = "qrc:/images/icon_user_back.png";
                        }
                    }
                }
                Text {
                    Layout.preferredWidth: 160
                    Layout.preferredHeight: 20
                    elide: Text.ElideRight
                    font.pixelSize: 12
                    color: "#000000"
//                    text: qsTr("扬州航盛科技有限公司大群")
                    text: displayName
                }
            }
            background: Rectangle {
                visible: control.down || control.highlighted || control.visualFocus
                color: "#C2C2C2"
            }
        }
    }
}
